<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<p>
		<input type="text" name="" id="username">
	</p>
	<p>
		<input type="text" name="" id="age">
		
	</p>
	<p>
		<input type="button" name="" id="btn" value="提交">
		
	</p>
	<script type="text/javascript">
		// 获取按钮元素
		var btn = document.getElementById("btn")
		// 获取姓名文本框
		var username = document.getElementById("username")
		// 获取年龄文本框
		var age = document.getElementById("age")
		// 为按钮添加点击事件
		btn.onclick = function() {
			// console.log("lvhang")
			// 创建Ajax对象
			var xhr = new XMLHttpRequest()

			// 获取用户在文本框输入的值
			var nameValue = username.value
			var ageValue = age.value

			// 测试获取的姓名和年龄是否有误
			// alert(nameValue)
			// alert(ageValue)

			// 拼接请求参数
			var params = 'username=' + nameValue + '&age=' + ageValue

			// 告诉Ajax要向哪儿发送请求， 以什么方式发送请求
			// 配置Ajax对象
			xhr.open('get', 'http://localhost:3000/get?' + params)
			// 发送请求
			xhr.send();
			// 获取服务器端响应的数据
			xhr.onload = function() {
				console.log(xhr.responseText)
			}
		}
	</script>	
</body>
</html>